<template>
	<view>
		<view class="container">
			<view class="header">
				<view class="input-view">
					<uni-icon type="search" size="17" color="#3CA4FA" />
					<input confirm-type="search" class="input" type="text" @blur="doChangeValue" placeholder="输入搜索车牌/车主姓名" />
				</view>
			</view>
			
			<view class="content">
				<scroll-view class="list" scroll-y="true" @scrolltolower="loadMore" >
					<block v-for="(item,index) in CustomerInfos" :key="index">
						<view class="card">
							<view class="uni-flex zcAlignI_center zcJustifyC_between">
								<view class="uni-flex zcAlignI_center">
									<view class="card_img f-enter"><image src="../../static/LOGO2019-11-7.png" mode="widthFix"></image></view>
									<view class="card_title">{{item.VehiclePlateNo}}</view>
									里程：{{item.VehicleKilometer?item.VehicleKilometer+'km':''}}
								</view>
								<view class="card_lable1" :style="{'border-color':(item.isServing?'':'#FFFFFF')}">{{item.isServing?'服务中':''}}</view>
							</view>
							<view class="uni-flex zcFlex_column card_content">
								<view class="uni-flex">车主姓名：{{item.VehicleContact}}</view>
								<view class="uni-flex">车主电话：{{item.VehicleContactMobile}}<view class="iconfont1 icon-dianhua"></view></view>
								<view class="uni-flex">服务顾问：<view class="fcolor">{{item.SalesManName?item.SalesManName:'待认领'}}</view></view>
								<view class="uni-flex" style="width: 100%;">
									<view class="" style="flex-shrink: 0;">创建时间：{{item.PlanInsurDate}}</view>
									<view class="card_lable2" style="background-color: #DFF6E9;color: #4fce85;">更换分缸线</view>
									<view class="card_lable2" style="background-color: #ffefdf;color: #fda54f;">助力油首保</view>
									<view class="card_lable2" style="background-color: #FFE0E0;color: #ff5e62;">刹车油</view>
								</view>
							</view>
							<navigator v-if="!item.SalesManName" url="../myCustomer_service/myCustomer_service" class="card_foot uni-flex zcAlignI_center zcJustifyC_between"><view class="fcolor">待认领</view><view class="iconfont icon-you">成为专属顾问</view></navigator>
						</view>
					</block>
					
					
					<!-- 上拉加载 -->
					<view v-show="loadingText" class="uni-tab-bar-loading">
						{{loadingText}}
					</view>
					<!-- 无数据 -->
					<view v-if="CustomerInfos.length==0 && isPaymentShow" class="uni-tab-bar-loading" style="text-align: center;">
						<view class="no_model">
							<image src="../../static/no_data.png" mode="widthFix" style="width: 100%;"></image>
							<view class="no_text">暂无数据</view>
						</view>
					</view>
				</scroll-view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from "../../components/uni-icon/uni-icon.vue"
	
	let _this;
	export default {
		components:{
			uniIcon
		},
		data() {
			return {
				searchData:'',
				pages:20,
				StartRow:0,	//	当前页数据开始下标
				dataLength:0,	//	当前页 数据返回个数
				loadingText:'',
				isPaymentShow:false,
				CustomerInfos:[]
			}
		},
		onLoad() {
			_this = this;
			_this.getMyVehicleInfoList();	// 初始化客户列表
		},
		methods: {
			doChangeValue(res) {
				if (res.detail.value === _this.searchData) {
					return;
				}
				_this.searchData = res.detail.value;
				
				//  条件查询时，需初始化分页参数
				_this.StartRow = 0;
				_this.dataLength = 0;
				_this.loadingText = '';
				_this.CustomerInfos = [];
				_this.getMyVehicleInfoList();
			},
			loadMore() {
				if (_this.dataLength < 20) {
					return;
				}
				_this.loadingText = '加载中';
				_this.getMyVehicleInfoList();
			},
			getMyVehicleInfoList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: 'false',//根据需求而定
					Paras: {
					    Name: 'Uni_Partner_Detail',
					    Action: 'getMyVehicleInfoList',
					    Data: {
							D_No:_this.searchData,
							Pages:20,
							PageIndex:_this.StartRow
						}
					},
					Callback: function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('客户列表 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							
							if (resjson.data!=null && resjson.data.length>0) {
								_this.StartRow = _this.StartRow+resjson.data.length;
								_this.dataLength = resjson.data.length;
								if (_this.dataLength < 20) {
									if (_this.StartRow >= 20) {
										_this.loadingText = '没有更多了';
									}else{
										_this.loadingText = '';
									}
								}else {
									_this.loadingText = '加载更多';
								}
								
								for (let i = 0; i < resjson.data.length; i++) {
									if (resjson.data[i].PlanInsurDate === '1900/1/1 0:00:00') {
										resjson.data[i].PlanInsurDate = '';
									}
									if (resjson.data[i].PlanInsurDate) {
										resjson.data[i].PlanInsurDate = _this.$ZcPublic.formatDate(resjson.data[i].PlanInsurDate,'yyyy-MM-dd hh:mm:ss')	
									}
									
									_this.CustomerInfos.push(resjson.data[i]);
								}
							}else {
								if (_this.CustomerInfos.length < 1) {
									_this.isPaymentShow = true;
								}
							}
							
						}else {
							uni.hideLoading();
						}
						
					},
					Scope: _this
				})
			}
		}
	}
</script>

<style>
	@font-face {
	  font-family: 'iconfont1';  /* project id 1144889 */
	  src: url('//at.alicdn.com/t/font_1144889_sfbz8a7zb4o.ttf') format('truetype');
	}
	.iconfont1{
		font-family: "iconfont1" !important;
		font-size: 28upx;
		font-style: normal;
		position: relative;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	.container{position: absolute;left: 0;top: 0;}
	.header{display: flex;align-items: center;padding: 0 24upx;height: 8%!important;position: relative;}
	.content{height: 92%;width: 100%;overflow: auto;}
	/* 搜索栏样式 */
	.input-view {
		/* width: 92%; */
		display: flex;
		height: 72upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		flex-wrap: nowrap;
		line-height: 72upx;
		flex: 1;
		padding-right: 16upx;
		box-shadow: 5upx 5upx 10upx #E5E5E5;
		justify-content: center;
	}
	.uni-icon{margin: 0 20upx;}
	.input-view .uni-icon {
		line-height: 30px !important;
	}
	
	.input-view .input {
		height: 72upx;
		line-height: 72upx;
		padding: 0 3%;
		flex: 1;
	}
	.icon-you:before{
		position: absolute;
		right: -40upx;
		color: #3CA4F9;
	}
	.icon-dianhua:after{
		content: "\e616";
		position: absolute;
		right: -40upx;
		font-size: 30upx;
		top: -4upx;
		color: #3CA4F9;
	}
	.card{background-color: #FFFFFF;border-radius: 20upx;margin: 10upx 20upx;padding: 20upx;padding-bottom: 20upx;box-shadow: 0upx 0upx 10upx #e5e5e5;}
	.card_content view,.card view{line-height: 1.5;font-size: 24upx;}
	.card_title{font-size: 32upx!important;margin: 10upx;margin-right: 20upx;}
	.card_img{width: 70upx;height: 70upx;border-radius: 100%;overflow: hidden;padding-top: 10upx;}
	.card_img>image{width: 100%;height: 100%;}
	.card_lable1{border: 2upx solid #83C6FD;color: #83C6FD;border-radius: 30upx;padding: 0 10upx;}
	.card_lable2{border-radius: 8upx;padding: 0 10upx;margin-left: 10upx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 15%;}
	.card_foot{background-color: #EEEEEE;margin-top: 10upx;padding: 10upx 20upx;padding-right: 60upx;}
	.fcolor{color: #3CA4F9;}
</style>
